<template>
	<view>
		<u-sticky>
			<view class="u-flex u-row-between u-m-l-18 u-m-r-18 u-p-t-18 u-p-b-24" style="background-color: #f5f5f5;">
				<view class="fw-large " @click="showOper = true">

					<text
						class="u-font-40 u-m-r-8">订单{{detailObj.orderState==13?'产品':''}}{{indexEnum.orderStateFillter[detailObj.orderState]}}</text>

					<u-icon name="arrow-right" size="32rpx"></u-icon>
				</view>
				<view>
					<block v-if="userPinia.isLoginType==3">
						<u-button v-if="detailObj.orderState==1" type="warning" :custom-style="customBtn"
							@click="TakeShow = true">确认</u-button>
					</block>
				</view>
			</view>
		</u-sticky>

		<view class="u-m-l-26 u-m-r-26" v-if="detailObj">
			<!-- 操作 -->
			<view class="bg-white" style="overflow: hidden;border-radius: 24rpx;">
				<view class="u-flex u-border-bottom u-p-b-32 u-p-t-32 u-p-l-28 u-font-lg">
					<block v-if="detailObj.payState==1">
						<text class=" u-m-r-8" style="color: #e74c3c;">订单尚未支付</text>
					</block>
					<block v-else-if="detailObj.payState==4">
						<text class=" u-m-r-8" style="color: #e74c3c;">订单差价尚未支付</text>
					</block>
					<block v-else-if="detailObj.payState==5">
						<text class=" u-m-r-8" style="color: #ffc300;">订单已支付</text>
					</block>
					<block v-else-if="detailObj.payState==15">
						<text class=" u-m-r-8" style="color: #7f8c8d;">订单已退款</text>
					</block>
					<block
						v-else-if="detailObj.payState!=1 && detailObj.payState!=4 && detailObj.payState!=5 && detailObj.payState!=15">
						<text class=" u-m-r-8" style="color: #7f8c8d;">感谢你使用呼叫器，期待再次光临</text>
					</block>
				</view>
				<u-grid :border="false" :col="4">
					<u-grid-item v-if="detailObj.orderState>5&&userPinia.isLoginType==4||userPinia.isLoginType==3"
						@click="callphone(detailObj.wholePhone)">
						<u-icon size="40" label-size='26' name="phone-fill" label-pos="bottom" label="联系用户"></u-icon>
					</u-grid-item>
					<u-grid-item @click="callphone(detailObj.businessLinkPhone)" v-if="userPinia.isLoginType!=3">
						<u-icon size="40" label-size='26' name="server-man" label-pos="bottom" label="联系商家"></u-icon>
					</u-grid-item>
					<u-grid-item @click="callphone(detailObj.waiterPhone)" v-if="userPinia.isLoginType!=4">
						<u-icon size="40" label-size='26' name="phone" label-pos="bottom" label="联系服务员"></u-icon>
					</u-grid-item>
					<u-grid-item @click="closeShow = true"
						v-if="userPinia.isLoginType ==3 && detailObj.orderState==1||userPinia.isLoginType==4&&detailObj.orderState==10">
						<u-icon size="40" label-size='26' name="close-circle-fill" label-pos="bottom"
							:label="userPinia.isLoginType==3?'取消订单':'取消'"></u-icon>
					</u-grid-item>


					<u-grid-item
						v-if="userPinia.isLoginType==3&&detailObj.orderState<12 &&!(detailObj?.goodsList.length==1 && detailObj?.goodsList[0].nums==1)"
						@click="showRefund=!showRefund">
						<u-icon size="40" label-size='26' name="close-circle-fill" label-pos="bottom"
							:label="showRefund?'取消退货退款':'退货退款'"></u-icon>
					</u-grid-item>
					<u-grid-item v-if="detailObj.orderState==1 && userPinia.isLoginType ==3 && !detailObj.lastAmount"
						@click="priceShow = true">
						<u-icon size="40" label-size='26' name="edit-pen-fill" label-pos="bottom" label="修改价格"></u-icon>
					</u-grid-item>


					<!-- <u-grid-item @click="navigetTo('/subpackage/order/goods/list')"
						v-if="userPinia.isLoginType==3 && detailObj.btnId && detailObj.beeperId">
						<u-icon size="40" label-size='26' name="plus-square-fill" label-pos="bottom"
							label="加单"></u-icon>
					</u-grid-item> -->

					<u-grid-item @click="navigetTo('/subpackage/order/goods/list')"
						v-if="userPinia.isLoginType==3 && detailObj.beeperId">
						<u-icon size="40" label-size='26' name="plus-square-fill" label-pos="bottom"
							label="加单"></u-icon>
					</u-grid-item>


					<u-grid-item v-if="userPinia.isLoginType==3">
						<u-icon size="40" label-size='26' name="mic" @click='mangeerEl.Open(orderId)' label-pos="bottom"
							label="语音"></u-icon>
					</u-grid-item>

					<u-grid-item @click="editShow = true"
						v-if="formList&&(userPinia.isLoginType==3||userPinia.isLoginType==4&&detailObj.orderState>5)">
						<u-icon size="40" label-size='26' name="order" label-pos="bottom" label="编辑信息"></u-icon>
					</u-grid-item>

					<u-grid-item @click="payShow = true"
						v-if="userPinia.isLoginType!=3 && (detailObj.payState==1 || detailObj.payState==4)&&detailObj.orderState>5">
						<u-icon size="40" label-size='26' name="grid" label-pos="bottom" label="支付二维码"></u-icon>
					</u-grid-item>

					<u-grid-item @click="showPrintTip"
						v-if="detailObj.printState ==0&&(userPinia.isLoginType==4&&detailObj.orderState>5||userPinia.isLoginType==3)">
						<u-icon size="40" label-size='26' name="coupon-fill" label-pos="bottom" label="打印"></u-icon>
					</u-grid-item>

					<block v-if="detailObj.orderState!=20">

						<u-grid-item v-if="detailObj.orderState ==5" @click="orderOperate(10,'接单')">
							<u-icon size="40" label-size='26' name="checkmark-circle-fill" label-pos="bottom"
								label="接单"></u-icon>
						</u-grid-item>


						<block v-if="detailObj.orderState>5">
							<u-grid-item v-if="detailObj.orderState==10" @click="orderOperate(11,'出发')">
								<u-icon size="40" label-size='26' name="checkmark-circle-fill" label-pos="bottom"
									label="出发"></u-icon>
							</u-grid-item>

							<u-grid-item @click="orderOperate(12,'到达')" v-if="detailObj.orderState==11">
								<u-icon size="40" label-size='26' name="checkmark-circle-fill" label-pos="bottom"
									label="到达"></u-icon>
							</u-grid-item>

							<u-grid-item @click="orderOperate(13,'回收')"
								v-if="detailObj.orderState==12&&detailObj.orderType==3&&(detailObj.timingState==2||detailObj.timingState==3)">
								<u-icon size="40" label-size='26' name="trash" label-pos="bottom" label="回收"></u-icon>
							</u-grid-item>

							<u-grid-item
								v-if="detailObj.orderState==12&&detailObj.orderType!==3||detailObj.orderState==13"
								@click="orderOperate(20,'完成')">
								<u-icon size="40" label-size='26' name="checkmark-circle-fill" label-pos="bottom"
									label="完成"></u-icon>
							</u-grid-item>

						</block>
					</block>

					<u-grid-item v-if="detailObj.errorState ==3 && userPinia.isLoginType==3"
						@click="userClerShow = true">
						<u-icon size="40" label-size='26' name="warning-fill" label-pos="bottom"
							label="取消订单审核"></u-icon>
					</u-grid-item>



					<!-- <block v-if="userPinia.isLoginType==3 && detailObj.orderType==3">
						<u-grid-item @click="timeClick('start')" v-if="detailObj.timingState==0">
							<u-icon size="40" label-size='26' name="play-left-fill" label-pos="bottom"
								label="开始计时"></u-icon>
						</u-grid-item>
						<u-grid-item @click="timeClick('end')" v-else-if="detailObj.timingState == 1">
							<u-icon size="40" label-size='26' name="play-left" label-pos="bottom" label="结束计时"></u-icon>
						</u-grid-item>
					</block> -->


				</u-grid>
			</view>

			<!-- 固定时长 && 非固定 -->
			<view class="bg-white u-m-t-26 " style="border-radius: 24rpx;"
				v-if="detailObj.orderType ==3&&(userPinia.isLoginType==4&&detailObj.orderState>5||userPinia.isLoginType==3) ">
				<view class="u-flex u-row-between">
					<view class="u-font-xl u-border-bottom u-p-b-24 u-p-t-24 u-p-l-24 fw-middel">
						{{detailObj.timingType==1?'固定时长':'非固定'}}
					</view>
					<view class="u-m-r-25 color-red">
						<text class="color-red" v-if="detailObj.timingState ==1">计时使用中</text>
						<text class="color-blue" v-else-if="detailObj.timingState==2">计时结束</text>
						<text class="color-blue" v-else-if="detailObj.timingState==3">超额结束</text>
					</view>
				</view>

				<view class="u-p-30 timeDetail">
					<view v-if="detailObj.timingState ==1"><text>可用时长: </text><text>{{detailObj.rentTime}}</text></view>
					<view v-if="detailObj.timingType ==2">
						<text>起步价: </text><text> {{detailObj.startFee}}元</text>
					</view>
					<view>
						<text>开始时间:</text>
						<text> {{detailObj.rentBeginDate||'未开始'}}</text>
					</view>
					<view>
						<text>结束时间: </text>
						<text>{{detailObj.rentEndDate||''}}</text>
					</view>
					<view v-if="detailObj.timingType ==1">
						<text>超时计费方式:</text>
						<text> {{detailObj.renewTime}}{{timeUnit(detailObj.renewUnit)}}/{{detailObj.renewPrice}}元</text>
					</view>
					<view v-if="detailObj.timingType ==2">
						<text>计费方式:</text>
						<text> {{detailObj.rentTime}}{{timeUnit(detailObj.rentUnit)}}/{{detailObj.rentPrice}}元</text>
					</view>
					<view>
						<text>说明: </text>
						<block v-if="detailObj.backFlag==0">
							<text>如租赁消费金额超过押金，产品可自留，无需归还。</text>
						</block>
						<block v-if="detailObj.backFlag==1">
							<text>如租赁消费金额超过押金，订单将自动结束，产品必须归还。</text>
						</block>
					</view>
				</view>

			</view>


			<!-- 商品信息 -->
			<view class="bg-white u-m-t-26" style="border-radius: 24rpx;">
				<view class="u-font-xl u-border-bottom u-p-b-24 u-p-t-24 u-p-l-24 fw-middel">{{detailObj.businessName}}
				</view>

				<view class="u-m-t-35 u-m-b-35 u-p-l-24 u-p-r-24">

					<view @click="item.select = !item.select" class="u-flex u-col-top u-p-b-18"
						v-for="(item,index) in detailObj?.goodsList" :key="index">
						<block v-if="showRefund">
							<u-icon v-if="item.select" name="checkmark-circle-fill" size="50" color="#ffc300"
								style="align-self: center;" class="u-m-r-25"></u-icon>
							<view v-else class="seleCt"></view>
						</block>

						<u-image :src="item.images" width="120" height="120"></u-image>
						<view class="u-flex-1 u-m-l-24">
							<view class="u-font-md">{{item.name}}</view>
							<view class="u-font-sm color-gary-xs u-m-t-10 u-m-b-5" v-if="item.strSpecVal">
								{{item.strSpecVal}}
							</view>
							<view class="u-font-sm "><text class="u-font-xs">x</text>{{item.nums}}</view>
						</view>
						<text>￥{{item.price}}</text>
					</view>

					<u-line class="u-line"></u-line>

					<view class="u-flex u-row-center" v-if="showRefund">
						<u-button size="mini" type="warning" @click="confirmRefund">确认退货退款</u-button>
					</view>

					<view class="u-m-t-40">
						<view class="u-flex u-row-between u-font-md u-p-b-25" style="color:red" @click="showTimePopup"
							v-if="detailObj.expectedTime&&detailObj.serviceMode!==1">
							<text class="">期望到达时间</text>
							<text>{{getOptimizeDateTwo(detailObj.expectedTime)}}
								<block v-if="detailObj.deliveryTime">(点击修改)</block>
							</text>

						</view>
						<view class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">包装费</text>
							<text>￥{{detailObj.packageAmount}}</text>
						</view>
						<view class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">配送费</text>
							<text>￥{{detailObj.deliveryAmount}}</text>
						</view>
						<view class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">押金</text>
							<text>￥{{detailObj.depositAmount || 0}}</text>
						</view>
						<view v-if="detailObj.discountOld" class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">养老金最高抵扣额</text>
							<text>￥{{detailObj.discountOld || 0}}</text>
						</view>
						<view v-if="detailObj.rebateOld" class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">养老金返利额</text>
							<text>￥{{detailObj.rebateOld || 0}}</text>
						</view>
						<view v-if="detailObj.discountPmc" class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">物业金最高抵扣额</text>
							<text>￥{{detailObj.discountPmc || 0}}</text>
						</view>
						<view v-if="detailObj.rebatePmc" class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">物业金返利额</text>
							<text>￥{{detailObj.rebatePmc || 0}}</text>
						</view>
					</view>
					<view class="u-flex u-row-between u-p-b-26">
						<text></text>
						<view>
							<text class="u-font-md">合计</text>
							<text class="u-font-xl fw-middel">￥{{detailObj.realAmount}}</text>
						</view>
					</view>

				</view>
			</view>

			<!-- 订单图片 -->
			<view class="bg-white u-m-t-26" style="border-radius: 24rpx;" v-if=" detailObj?.urls?.length>0">
				<view class="u-font-xl u-border-bottom u-p-b-24 u-p-t-24 u-p-b-24 u-p-l-24 fw-middel">订单图片</view>
				<scroll-view scroll-x style="white-space: nowrap;">
					<image @click="openSelectImage(index)" class="imginnerBox" :src="item" mode="center"
						v-for="(item,index) in detailObj?.urls" :key="index"></image>
				</scroll-view>
			</view>



			<!-- 详情  -->
			<view class="bg-white u-m-t-26" style="border-radius: 24rpx;">
				<view class="u-font-xl u-border-bottom u-p-b-24 u-p-t-24 u-p-l-24 fw-middel">详情</view>

				<view class="u-m-t-20 u-m-b-35 u-p-l-24 u-p-r-24">
					<view>
						<view
							v-if="detailObj.voiceRemark&&(userPinia.isLoginType==4&&detailObj.orderState>5||userPinia.isLoginType==3)"
							class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">用户语音备注</text>
							<u-icon @click="ScanAudio(detailObj.voiceRemark,'user')" name="play-right-fill"
								color="#ff9900" :label="userMp3?'播放':'正在播放...'" label-color="#ff9900"></u-icon>
							<!-- <text>{{detailObj.voiceRemark}}</text> -->
						</view>
						<view v-if="detailObj.businessVoice" class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">商户语音备注</text>
							<u-icon @click="ScanAudio(detailObj.businessVoice,'shop')" name="play-right-fill"
								color="#ff9900" :label="shopMp3?'播放':'正在播放...'" label-color="#ff9900"></u-icon>
							<!-- <text>{{detailObj.voiceRemark}}</text> -->
						</view>
						<view class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">呼叫器</text>
							<text>{{detailObj.beeperName}}</text>
						</view>
						<view class="u-flex u-row-between u-font-md u-p-b-25"
							v-if="userPinia.isLoginType==4&&detailObj.orderState>5||userPinia.isLoginType==3">
							<text class="">联系人</text>
							<text>{{detailObj.linkName}}</text>
						</view>
						<view class="u-flex u-row-between u-font-md u-p-b-25"
							v-if="userPinia.isLoginType==4&&detailObj.orderState>5||userPinia.isLoginType==3">
							<text class="">联系电话</text>
							<span>{{detailObj.phone}}
								<u-icon v-if="!showWholePhone" style="font-size:43rpx;vertical-align: -1px;" name="eye"
									@click="detailObj.phone = detailObj.wholePhone;showWholePhone = true"></u-icon>
							</span>
						</view>


						<view class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="" style="white-space: nowrap;">详细地址</text>
							<view class="u-p-l-15">
								{{detailObj.address}}{{detailObj.buildName}}{{detailObj.unitName}}{{detailObj.floorName}}{{detailObj.houseNumber}}
							</view>

							<!-- <u-input disabled input-align="right" placeholder="" v-model="addresJoin"></u-input> -->
							<!-- <view class="u-text-right">{{detailObj.address}} {{detailObj.houseNumber}}</view> -->
							<!-- <u-icon class="u-m-l -6" name="map-fill" size="35" color="#ffc300" label="导航" label-color="#ffc300" @click="goMap"></u-icon> -->

						</view>

						<view class="u-m-b-15" v-if="!overShow">
							<block v-if="!TakeShow">
								<map id="mymap" class="map" :latitude="detailObj.lngLat?.split(',')[1]||0"
									:longitude="detailObj.lngLat?.split(',')[0]||0" :markers="[points]">
									<view z-index="1" style="width: 100%;height: 100%;" @click.self="goMap"></view>
								</map>
							</block>
						</view>

						<view class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">订单编号</text>
							<view>
								<text>{{detailObj.orderNo}}</text>
								<u-button size="mini" type="warning" class="u-m-l-12"
									@click="copy(detailObj.orderNo)">复制</u-button>
							</view>
						</view>

						<view class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">订单类型</text>
							<text>{{indexEnum.orderTypeFilter[detailObj.orderType]}}</text>
						</view>

						<view class="u-flex u-row-between u-font-md u-p-b-25" v-if="detailObj.orderType==8">
							<text class="">报警类型</text>
							<text>{{indexEnum.alarmTypeFilter[detailObj.alarmType]}}</text>
						</view>

						<view class="u-flex u-row-between u-font-md u-p-b-25" v-if="detailObj.orderType==8">
							<text class="">报警地址</text>
							<text>{{indexEnum.alarmTypeFilter[detailObj.currentAddress]}}</text>
						</view>

						<view class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">下单时间</text>
							<text>{{detailObj.createDate}}</text>
						</view>



						<view class="u-flex u-row-between u-font-md u-p-b-25"
							v-if="userPinia.isLoginType==4&&detailObj.orderState>5||userPinia.isLoginType==3">
							<text class="">支付方式</text>
							<text>{{indexEnum.payTypeFillter[detailObj.payType]}}</text>
						</view>

						<view v-if="detailObj.errorState!=0" class="u-flex u-row-between u-font-md u-p-b-25">
							<text class="">异常状态</text>
							<text class="color-red">{{indexEnum.errorState[detailObj.errorState]}}</text>
						</view>
					</view>

				</view>
			</view>


			<!-- 附加信息 -->
			<view class="bg-white u-m-t-26" style="border-radius: 24rpx;"
				v-if="detailObj?.orderAttrs?.length>0&&(userPinia.isLoginType==4&&detailObj.orderState>5||userPinia.isLoginType==3)">
				<view class="u-font-xl u-border-bottom u-p-b-24 u-p-t-24 u-p-l-24 fw-middel">附加信息</view>

				<view class="u-m-t-20 u-m-b-35 u-p-l-24 u-p-r-24">
					<block v-for="(item,index) in detailObj?.orderAttrs" :key="index">
						<view class="u-flex u-row-between u-font-md u-p-b-10" v-for="(items,indexs) in item"
							:key="indexs">
							<text class="">{{items.attrName}}:{{items.value}}</text>
						</view>
					</block>

				</view>
			</view>

		</view>
		<view class="u-p-b-80"></view>
	</view>


	<!-- 订单跟踪 -->
	<u-popup closeable v-model="showOper" @open="getOper" mode="bottom">
		<viwe class="showOper">
			<view class="title">订单跟踪</view>
			<view class="u-p-30">
				<u-time-line>
					<u-time-line-item v-for="(item,index) in operList" :key="index">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node" style="background: #19be6b;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{item.operation}}</view>
								<!-- <view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view> -->
								<view class="u-order-time">{{item.operationDate}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>

				<u-empty v-if="operList.length===0" text="暂无记录"></u-empty>
			</view>
		</viwe>
	</u-popup>
	<!-- 接单 -->
	<u-popup closeable mode="center" borderRadius="28" v-model="TakeShow" @open="getWaiterList">
		<view class="TakeModel">
			<view class="title">接单:选择服务员</view>

			<view class="u-p-l-25 u-p-r-25">
				<u-form :model="takeForm" :border-bottom="false">
					<u-form-item :border-bottom="false">
						<!-- <navigator url="/pages/order/waiterList"> -->
						<u-input class="select-waiter" type="textarea" v-model="takeForm.waiterNames" border
							placeholder="请选择服务员" :disabled="true" @click="toSelectWaiters"></u-input>
						<!-- </navigator> -->
					</u-form-item>

					<u-form-item label="图片">
						<u-upload :auto-upload="false" ref="uploadsok" max-count="5"></u-upload>
					</u-form-item>

					<u-form-item>
						<textarea v-model="takeForm.remark" style="width: 100%;box-sizing: border-box;"
							class="u-border u-p-22" placeholder="请输入备注" maxlength="-1"></textarea>
					</u-form-item>
				</u-form>
			</view>

			<view class="u-m-l-26 u-m-r-26 u-m-b-12">
				<u-button type="warning" @click="takeOrders">确定</u-button>
			</view>

		</view>
	</u-popup>

	<!-- 服务员列表 -->
	<!-- 	<u-select :list="waiterList" value-name="id" label-name="name" v-model="waiterShow" title="选择接单服务员"
		@confirm="waiterConfir"></u-select> -->

	<!-- 取消订单 -->
	<u-modal :title="userPinia.isLoginType==3?'取消订单':'取消'" v-model="closeShow" async-close ref="claerEl"
		show-cancel-button @confirm="cancelOrder">
		<view class="u-p-22">
			<u-form labelWidth="auto" :error-type="['message','border-bottom']" :border-bottom="false"
				:model="closeForm" ref="closeFormEl">
				<u-form-item prop="cancelReason">
					<u-input v-model="closeForm.cancelReason" placeholder="请输入取消理由" type="textarea" border></u-input>
				</u-form-item>
			</u-form>
			<!-- 	<textarea v-model="closeForm.cancelReason" placeholder="输入取消原因" maxlength="-1" class="u-border u-p-26"
				style="box-sizing: border-box;width: 100%;"></textarea> -->
		</view>
	</u-modal>

	<!-- 修改价格 -->
	<u-modal title="修改价格" ref="priceModalEl" :async-close="true" v-model="priceShow" show-cancel-button
		@confirm="orderChangePrice">
		<view class="u-p-24">
			<u-form :error-type="['message','border-bottom']" ref="priceFormEl" :model="priceForm" label-position="top"
				:border-bottom="false">
				<u-form-item label="价格" label-position="left">
					<u-input v-model="detailObj.realAmount" placeholder="" input-align="right" disabled></u-input>
				</u-form-item>
				<u-form-item label="改价为" prop="price">
					<u-input border input-align="right" v-model="priceForm.price" placeholder="请输入新价格"
						type="digit"></u-input>
				</u-form-item>

				<u-form-item label="请输入备注" label-position="top" prop="remark">
					<u-input type="textarea" maxlength="-1" v-model="priceForm.remark" border
						placeholder="请输入备注"></u-input>
					<!-- <textarea maxlength="-1" style="box-sizing: border-box;width: 100%;" class="u-p-22 u-border"
						placeholder="请输入备注" v-model="priceForm.remark"></textarea> -->
				</u-form-item>
			</u-form>
		</view>
	</u-modal>

	<!-- 用户申请取消 -->
	<u-popup v-model="userClerShow" mode="center" border-radius="23" closeable>
		<view class="userClerModel bg-white">
			<view class="u-font-35 u-text-center u-font-lg u-p-t-22">用户申请取消订单</view>

			<view class="u-m-12 u-p-12">
				<u-form labelPosition="top">
					<u-form-item label="取消订单理由">
						<u-input height="80" placeholder="未填写理由" :auto-height="false" type="textarea"
							maxlength="-1"></u-input>
					</u-form-item>
				</u-form>
			</view>

			<view class="u-flex u-row-center ">
				<u-button class="u-m-l-22 u-m-r-22" type="error" @click="affirmOrder('no')">拒 绝</u-button>
				<u-button class="u-m-l-22 u-m-r-22" type="success" @click="affirmOrder('yes')">同 意</u-button>
			</view>


		</view>
	</u-popup>

	<!-- 修改时间 -->
	<u-popup v-model="timeSelectShow" :safe-area-inset-bottom="true" mode="bottom" border-radius="23" closeable>
		<view class="u-font-32 u-text-center u-p-24">
			修改送达时间
		</view>
		<treeSelect v-model:selectedIndex="timeSelectIndex" :selectedId="timeSelectId" @confirm="confirmSelectTime"
			:list="timeSelectList"></treeSelect>
	</u-popup>
	<!-- <u-modal v-model="userClerShow" title="用户取消订单申请">
		<view>

		</view>
	</u-modal> -->

	<!-- 编辑信息 -->
	<u-modal v-model="editShow" mask-close-able show-cancel-button ref="editModelEl" async-close title="编辑信息"
		@confirm="editConfirm">
		<view class="u-p-l-24 u-p-r-24">
			<u-form labelWidth="140">
				<block v-for="(item,index) in detailObj?.orderAttrs" :key="index">
					<u-form-item :label="items.attrName" v-model="items.value" v-for="(items,indexs) in item"
						:key="indexs">
						<u-input border v-model="items.value" placeholder="请输入"></u-input>
					</u-form-item>
				</block>
			</u-form>
		</view>
	</u-modal>

	<!-- 支付二维码 -->
	<u-popup v-model="payShow" mode="center" @open="getPayWxUrlById">
		<u-image width="500" height="500" :src="qrImages"></u-image>
	</u-popup>

	<!-- 完成 -->
	<u-modal async-close mask-close-able title="上传图片" v-model="overShow" @confirm="overFun" width="700">
		<view class="overModel">
			<u-upload :auto-upload="false" ref="uploads" max-count="9"></u-upload>
		</view>
	</u-modal>

	<!-- 到达 -->
	<!-- reachShow -->
	<u-modal async-close mask-close-able title="上传图片" v-model="reachShow" @confirm="reachFun" width="700">
		<view class="overModel">
			<u-upload :auto-upload="false" ref="uploads2" max-count="9"></u-upload>
		</view>
	</u-modal>

	<!-- 回收 -->
	<!-- recoveryShow -->
	<u-modal async-close mask-close-able title="上传图片" v-model="recoveryShow" @confirm="recoveryFun" width="700">
		<view class="overModel">
			<u-upload :auto-upload="false" ref="uploads3" max-count="9"></u-upload>
		</view>
	</u-modal>

	<!-- 语音组件 -->
	<recorderManager @updates="getDetail" ref="mangeerEl" />

	<!-- 打印 -->
	<!-- 	<u-modal ref="logShowEl" v-model="logShow" showCancelButton async-close content="是否确认打印"
		@confirm="logConfirm"></u-modal> -->

	<u-modal v-model="print.show" title="打印提示" show-cancel-button @confirm="logConfirm" confirm-text="确定打印">
		<view class="print-tip" v-if="existPrintData">
			<view class="item">
				<view class="label">
					<u-icon name="checkmark-circle-fill" color="#67C23A"></u-icon>成功次数
				</view>
				<view class="value">
					{{print.printSucceed}}
				</view>
			</view>
			<view class="item">
				<view class="label">
					<u-icon name="error-circle-fill" color="#F56C6C"></u-icon>失败次数
				</view>
				<view class="value">
					{{print.printFail}}
				</view>
			</view>
			<view class="item">
				<view class="label">
					<u-icon name="info-circle-fill" color="#409EFF"></u-icon>打印中
				</view>
				<view class="value">
					{{print.printing}}
				</view>
			</view>
		</view>
		<view v-else class="u-p-30 u-text-center u-font-15">
			是否确认打印？
		</view>
	</u-modal>

</template>

<script setup lang="ts">
	import recorderManager from '@/components/recorderManager/recorderManager.vue'
	import treeSelect from '@/components/treeSelect/treeSelect.vue'
	import { onLoad, onReady, onShow } from '@dcloudio/uni-app'
	import { computed, effect, reactive, ref, nextTick, unref } from "vue";
	import orderApi from '@/api/order'
	import taskApi from "@/api/task"
	import waitersApi from '@/api/waiters'
	import indexEnum from '@/enum/index'
	import userSotre from '@/store/user'
	import orderSotre from '@/store/order'
	import { bindingBean, getOptimizeDateTwo, getOptimizeDate, formatDateString, getMinuteIntTime } from "@/utils"
	const fifteenTimes = getMinuteIntTime(15)
	const orderPinia = orderSotre()
	const mangeerEl = ref(null)
	const userPinia = userSotre()
	const orderId = ref()



	const overShow = ref(false)
	const uploads = ref(null)
	const uploadsok = ref(null)
	const uploads2 = ref(null)
	const uploads3 = ref(null)
	const operList = ref([])
	const userMp3 = ref(true)
	const shopMp3 = ref(true)
	const showWholePhone = ref(false)
	const showOper = ref(false)

	const detailObj = reactive({

	})
	const print = reactive({
		show: false,
		printSucceed: 0,
		printFail: 0,
		printing: 0,
	})

	function timeUnit(num) {
		if (num == 1) {
			return "分"
		} else if (num == 2) {
			return '小时'
		} else if (num == 3) {
			return '天'
		}
	}

	// const logShowEl = ref(null)
	// const logShow = ref(false)



	async function showPrintTip() {
		const res = await orderApi.printStatistics({ orderId: detailObj.orderId })
		bindingBean(print, res.data)
		print.show = true
	}

	function logConfirm() {
		orderApi.logOrder({ id: detailObj.orderId }).then(res => {
			print.show = false
			uni.showToast({
				title: res.msg
			})
			getDetail()
		})

	}


	const userClerShow = ref(false)
	function affirmOrder(type) {

		let obj = {
			id: orderId.value,
		}

		switch (type) {
			case 'no':
				obj.state = 0
				break;
			case 'yes':
				obj.state = 1
				break;
		}

		orderApi.affirmOrder(obj).then(res => {
			uni.showToast({
				title: res.msg,
				success: () => {
					userClerShow.value = false
					switch (type) {
						case 'no':
							uni.$emit('errorState', {
								id: orderId.value,
								type: 1
							})
							break;
						case 'yes':
							uni.$emit('errorState', {
								id: orderId.value,
								type: 0
							})
							break;
					}
					getDetail()
				}
			})


		})
	}
	function goMap() {
		uni.getLocation({
			type: 'wgs84',
			success: (res) => {
				uni.openLocation({
					latitude: Number(detailObj.lngLat?.split(',')[1] || 0),
					longitude: Number(detailObj.lngLat?.split(',')[0] || 0),
					name: detailObj?.address,
					address: detailObj?.provinceName + detailObj?.cityName + detailObj?.areaName + detailObj?.address,
					scale: 18
				})
			},
			fail: () => {
				uni.showModal({
					content: '检测到您没打开获取信息功能权限，是否去设置打开？',
					confirmText: "确认",
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (res) => {
									console.log('确定');
								}
							})
						}
					}
				})
			}

		})


	}
	// 显示可选时间弹框
	const timeSelectShow = ref(false)
	const timeSelectIndex = ref(0)
	const timeSelectId = ref("")
	const timeSelectList = ref([])
	const selectedTime = ref()
	function showTimePopup() {
		// expectedTime是预计送达时间，deliveryTime是可选时间段,selectedTime是当前选中的时间
		let { expectedTime, deliveryTime } = detailObj

		if (!deliveryTime) return
		expectedTime = expectedTime.includes("~") ? expectedTime.split("~")[1] : expectedTime
		// !unref(selectedTime)&&(selectedTime.value = expectedTime)
		const selectedTime = expectedTime
		const expectedTimeTimestamp = new Date(expectedTime).getTime()
		// 可选时间段，获取15分钟的整数倍,也是明天以及后五天的可选时间
		deliveryTime = getFifteenTime(...deliveryTime.split("-"))
		// 今天的可选时间
		let todayTimes = []
		expectedTime = expectedTime.split(" ")
		// 这里的条件是判断，如果flag为true，则是今天可到否则是明天可到
		const flag = Date.now() < expectedTimeTimestamp && expectedTime[0].startsWith(formatDateString(new Date(), "yyyy-MM-dd"))
		expectedTime = expectedTime[1].split(":").slice(0, 2)
		// times是可选的，在预计到达时间后面可选到达时间

		const times = deliveryTime.filter(item => {
			let val = item.split(":")
			val = [Number(val[0]), Number(val[1])]
			return val[0] > expectedTime[0] || val[0] == expectedTime[0] && val[1] >= expectedTime[1]
		})
		expectedTime = expectedTime.join(":")
		if (flag) todayTimes.push(expectedTime)
		if (todayTimes.length) {
			expectedTime = expectedTime.split(":")
			expectedTime = [Number(expectedTime[0]), Number(expectedTime[1])]
			todayTimes = todayTimes.concat(times)
		}
		// 获取五天时间
		let timeList = getDateList()
		timeList = timeList.map((item, index) => {
			let name = ""
			let children = []
			switch (index) {
				case 0:
					name = "今天"
					children = todayTimes
					break
				case 1:
					name = "明天"
					children = flag ? deliveryTime : times
					break
				default:
					name = item.month + "月" + item.day + "号"
					children = deliveryTime
			}
			return {
				name,
				id: item.name,
				children: children.map(item2 => ({ id: item.name + " " + item2, name: item2 })),
			}
		})
		// 如果今天不能送出那么就不显示今天的时间
		todayTimes.length === 0 && (timeList.splice(0, 1))
		timeSelectList.value = timeList
		// let timeActiveIndex = 0
		// let timeActiveId = ""
		timeList.find((item, index) => {
			const val = item.children.find(item2 => selectedTime.startsWith(item2.id))
			if (val) {
				timeSelectIndex.value = index
				timeSelectId.value = val.id
				return true
			}
		})
		timeSelectShow.value = true
	}
	// 获取最近五天的年月日
	function getDateList() {
		let arr = [1, 2, 3, 4, 5]
		const date = new Date()
		arr = arr.map((_, index) => {
			const date2 = new Date(date.getTime() + index * 24 * 60 * 60 * 1000)
			const name = formatDateString(date2, "yyyy-MM-dd")
			const month = date2.getMonth() + 1
			return {
				name,
				year: date2.getFullYear(),
				month: month < 10 ? "0" + month : month,
				day: date2.getDate()
			}
		})
		return arr
	}
	// 获取15的整数倍时间
	function getFifteenTime(startTime, endTime) {
		startTime = startTime.split(":")
		startTime = [startTime[0], startTime[1]]
		endTime = endTime.split(":")
		endTime = [endTime[0], endTime[1]]
		return fifteenTimes.filter(item => {
			const val = item.split(":")
			const val1 = Number(val[0])
			const val2 = Number(val[1])
			const val3 = Number(startTime[0])
			const val4 = Number(startTime[1])
			const val5 = Number(endTime[0])
			const val6 = Number(endTime[1])
			const startFlag = val1 == val3 && val4 < val2 || val1 > val3
			const endFlag = val1 == val5 && val6 > val2 || val5 > val1
			return startFlag && endFlag
		})
	}
	// 确定选择时间
	async function confirmSelectTime(time) {
		const res = await uni.showModal({
			title: "提示",
			content: "确定修改期望到达时间",
		})
		if (!res.confirm) return
		await orderApi.setExpectedTime({ expectedTime: time, orderId: unref(orderId) })
		uni.showToast({
			title: "修改成功",
			icon: "success"
		})
		// selectedTime.value = time
		timeSelectShow.value = false
		detailObj.expectedTime = time
		uni.$emit("getOrderList")
	}
	function ScanAudio(str, type) {
		switch (type) {
			case 'user':
				userMp3.value = false
				break;

			case 'shop':
				shopMp3.value = false
				break;
		}

		let music = null;

		music = uni.createInnerAudioContext(); //创建播放器对象

		music.src = str;

		music.play(); //执行播放

		music.onEnded(() => {

			switch (type) {
				case 'user':
					userMp3.value = true
					break;

				case 'shop':
					shopMp3.value = true
					break;
			}

			//播放结束
			music = null;

		})
	}

	const TakeShow = ref(false)
	const waiterList = ref([])
	const waiterShow = ref(false)

	const editShow = ref(false)
	const editModelEl = ref(null)
	const editFormEl = ref(null)
	const reachShow = ref(false)
	const recoveryShow = ref(false)
	const editForm = reactive({

	})

	const editConfirm = () => {
		let list = []
		Object.keys(detailObj.orderAttrs).map(item => {
			detailObj.orderAttrs[item].map(items => {
				if (items.value != "") {
					list.push(items)
				}
			})
		})

		orderApi.setOrderAttr({
			orderId: orderId.value,
			orderAttrs: list
		}).then(res => {
			uni.showModal({
				title: res.msg,
				success: (res) => {
					editShow.value = false
				}
			})
		}).finally(fina => {
			editModelEl.value.clearLoading()
		})
	}

	const getWaiterList = () => {
		waitersApi.getWaiterList({ waiterType: detailObj.waiterRestrict || '' }).then(res => {
			console.log(res.data)
			waiterList.value = res.data
		})
	}

	const takeForm = reactive({
		remark: "",
		waiterIds: [],
		waiterNames: "",
		power: 0,//1 表示强制服务员接单，0表示非强制
	})

	const claerEl = ref(null)
	const closeFormEl = ref(null)
	const closeForm = reactive({
		cancelReason: ''
	})
	const closeRules = reactive({
		cancelReason: {
			required: true,
			message: '请输入取消理由',
			// 可以单个或者同时写两个触发验证方式
			trigger: ['change', 'blur'],
		}
	})
	const closeShow = ref(false)

	const priceFormEl = ref(null)
	const priceModalEl = ref(null)
	const priceShow = ref(false)
	const priceForm = reactive({
		remark: '',
		price: ''
	})
	const priceRules = reactive({
		price: {
			required: true,
			message: '请输入价格',
			// 可以单个或者同时写两个触发验证方式
			trigger: ['change', 'blur'],
		},
		remark: {
			required: true,
			message: '请输入备注',
			// 可以单个或者同时写两个触发验证方式
			trigger: ['change', 'blur'],
		}

	})

	const customBtn = reactive({

	})

	const payShow = ref(false)
	const qrImages = ref('')

	const getPayWxUrlById = () => {//查询支付二维码
		orderApi.getPayWxUrlById({
			beeperId: detailObj.beeperId
		}).then(res => {
			qrImages.value = res.data
		})

	}

	function reachFun() {
		let list = uploads2.value.lists.map(item => item.url)

		let newlist = []
		list.map((item) => {
			newlist.push(uni.getFileSystemManager().readFileSync(item, 'base64'));
		})
		orderApi.orderOperate({
			id: orderId.value,
			state: 12,
			images: newlist
		}).then(res => {
			uni.showToast({
				title: res.msg
			})
			let time = setTimeout(() => {
				getDetail()
				clearTimeout(time)
			}, 1000)
		}).finally(() => {
			reachShow.value = false
		})
	}

	function overFun() {
		let list = uploads.value.lists.map(item => item.url)

		let newlist = []


		list.map((item) => {
			newlist.push(uni.getFileSystemManager().readFileSync(item, 'base64'));
		})
		orderApi.orderOperate({
			id: orderId.value,
			state: 20,
			images: newlist
		}).then(res => {
			uni.$emit('setType', detailObj.orderId)
			uni.showToast({
				title: res.msg
			})
			let time = setTimeout(() => {
				uni.navigateBack()
				clearTimeout(time)
			}, 1500)
		}).finally(() => {
			overShow.value = false
		})



	}

	function recoveryFun() {
		let list = uploads3.value.lists.map(item => item.url)
		let newlist = []
		list.map((item) => {
			newlist.push(uni.getFileSystemManager().readFileSync(item, 'base64'));
		})
		orderApi.orderOperate({
			id: orderId.value,
			state: 13,
			images: newlist
		}).then(res => {
			uni.showToast({
				title: res.msg
			})
			let time = setTimeout(() => {
				getDetail()
				clearTimeout(time)
			}, 1000)
		}).finally(() => {
			recoveryShow.value = false
		})
	}
	const orderOperate = (type : number, str : string) => {// 服务员对订单的操作
		if (type == 20) {
			overShow.value = true
		} else if (type == 12) {
			reachShow.value = true
		} else if (type == 13) {
			recoveryShow.value = true
		}
		else {
			uni.showModal({
				title: '确认操作',
				content: `是否${str}`,
				success: (rules) => {
					if (rules.confirm) {
						orderApi.orderOperate({
							id: orderId.value,
							state: type
						}).then(res => {
							uni.showToast({
								title: "操作成功",
								success: () => {
									getDetail()
								}
							})
						})
					}
				}
			})
		}
	}

	const showRefund = ref(false)
	const confirmRefund = () => {

		if (detailObj?.goodsList.some(item => item.select)) {
			uni.showModal({
				title: '提示',
				content: '是否确认退货退款',
				success: (result) => {
					if (result.confirm) {

						orderApi.saleReturn({
							orderId: orderId.value,
							list: detailObj?.goodsList.map(item => {
								if (item.select) {
									return {
										nums: 1,
										orderGoodsId: item.orderGoodsId
									}
								}
							})
						}).then(res => {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								success: () => {
									getDetail()
								}
							})
						})
					}
				}

			})
		} else {
			uni.showToast({
				title: '请选择退款商品',
				icon: 'none'
			})
		}

	}

	// const waiterConfir = (e) => {
	// 	takeForm.waiterId = e[0].value
	// }

	const copy = (str : string) => {
		uni.setClipboardData({
			data: str,
			success: () => {
				uni.showToast({
					title: "复制成功"
				})
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}

	const getOper = () => {
		orderApi.getListOper({
			orderId: orderId.value
		}).then(res => {
			operList.value = res.data
		})
	}

	const navigetTo = (url) => {
		uni.navigateTo({
			url
		})
	}



	const callphone = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone,
		}).catch(() => {

		})
	}
	const toSelectWaiters = () => {
		uni.navigateTo({
			url: `/subpackage/order/waiterList?ids=${takeForm.waiterIds.join(",")}&id=${unref(orderId)}`
		})
	}
	//确认接单
	const takeOrders = () => {
		let list = uploadsok.value.lists.map(item => item.url)
		let newlist = []
		list.map((item) => {
			newlist.push(uni.getFileSystemManager().readFileSync(item, 'base64'));
		})
		orderApi.takeOrders(Object.assign({ ...takeForm }, { orderId: orderId.value, images: newlist })).then(res => {
			if (res.status == 0) {
				uni.showModal({
					title: '提示',
					showCancel: false,
					content: takeForm.waiterIds.length > 1 ? '已派单，等待服务员接单' : '派单成功',
					success: function (res) {
						TakeShow.value = false
						getDetail()
					}
				});
			}
		})
	}

	// 商户取消订单或者服务员取消接单
	const handleCancel = async () => {
		if (userPinia.isLoginType == 3) {
			closeShow.value = true
		} else {
			// 服务员取消接单
			const { confirm } = await uni.showToast({
				icon: "error",
				title: "确定取消接单？"
			})
			await orderApi.taskOperate({ orderId: orderId.value, state: 3 })
			this.$emit("cancelTakeOrder", orderId.value)
			uni.navigateBack()
		}
	}
	const cancelOrder = async () => {//取消订单
		const valid = await closeFormEl.value.validate()
		if (valid) {
			try {
				if (userPinia.isLoginType == 3) {
					await orderApi.cancelOrder(Object.assign(closeForm, { orderId: orderId.value }))
				} else {
					await taskApi.taskOperate({ orderId: orderId.value, state: 3 })
				}
				uni.showToast({
					title: '取消成功',
					success: () => {
						closeShow.value = false
					}
				})
				getDetail()
			} catch {
				// closeShow.value = false
			}


		} else {
			claerEl.value.clearLoading()
		}



	}

	function timeClick(type : string) {
		uni.showModal({
			title: '提示',
			content: '是否确认操作',
			success: (rules) => {
				if (rules.confirm) {
					let obj = {
						id: detailObj.orderId,
					}

					switch (type) {
						case 'start':
							obj.state = 1
							break;

						case 'end':
							obj.state = 2
							break;

					}

					orderApi.timingOrderOperate(obj).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						switch (type) {
							case 'start':
								detailObj.timingState = 1
								break;

							case 'end':
								detailObj.timingState = 2
								break;

						}
					})
				}
			}
		})




	}

	//修改价格
	const orderChangePrice = () => {
		priceFormEl.value.validate(valid => {
			if (valid) {
				orderApi.orderChangePrice(Object.assign(priceForm, { orderId: orderId.value })).then(res => {
					getDetail(true)
					priceModalEl.value.clearLoading()
					priceShow.value = false
				})
			} else {
				priceModalEl.value.clearLoading()
			}
		})
	}

	onLoad((e) => {
		uni.$on("selectWaiters", ({ waiters, power }) => {
			console.log(waiters)
			takeForm.power = power
			takeForm.waiterIds = waiters.map(item => item.id)
			takeForm.waiterNames = waiters.map(item => item.name).toString()
			console.log(takeForm.waiterNames)
		})

		orderId.value = e.orderId
		getDetail(true)

		orderPinia.$patch({
			shopList: []
		})
	})


	const getDetail = (first) => {//查询订单详情
		orderApi.getOrder({
			id: orderId.value
		}).then(res => {
			if (res.data.orderAttrs === null) {
				res.data.orderAttrs = []
			}

			// selectedTime.value = res.data.expectedTime
			if (res.data.phone) {
				showWholePhone.value = false
				res.data.wholePhone = res.data.phone
				res.data.phone = res.data.phone.split("")
				res.data.phone.splice(3, 4, "****")
				res.data.phone = res.data.phone.join("")
			}
			Object.assign(detailObj, res.data)
			orderPinia.setOrderDetail(res.data)
			if (res.data.errorState == 3 && userPinia.isLoginType == 3) {
				userClerShow.value = true
			}
			uni.$emit('modifyOrderState', {
				id: res.data.orderId,
				state: res.data.orderState
			})
			if (first) {
				priceFormEl.value.setRules(priceRules)
				closeFormEl.value.setRules(closeRules)
			}
		})
	}


	// const waiterItem = computed(() => {
	// 	return waiterList.value.find(item => item.id == takeForm.waiterId)?.name
	// })

	const formList = computed(() => {
		// return Object.keys(detailObj.orderAttrs).length
		return !(uni.$u.test.isEmpty(detailObj.orderAttrs))
	})

	const existPrintData = computed(() => print.printFail || print.printSucceed || print.printing)

	const points = computed(() => {
		return {
			id: 0,
			title: detailObj.address,
			latitude: Number(detailObj.lngLat?.split(',')[1]),
			longitude: Number(detailObj.lngLat?.split(',')[0]),
			iconPath: 'https://pic.kanglailab.com/common/redCross.png',
			width: 20,
			height: 20,
			callout: {
				content: '点击使用地图app打开',
				color: '#ffc300',
				fontSize: 16,
				display: 'ALWAYS',
				padding: 15,
				bgColor: '#303133'
			}
		}
	})

	function openSelectImage(index) {
		let tempList = detailObj?.urls
		uni.previewImage({
			current: index,
			urls: tempList
		})
	}


 //    const addresJoin = computed(()=>{
	// 	return detailObj.address + detailObj.houseNumber
	// })
</script>

<style lang="scss" scoped>
	.timeDetail {
		font-size: 25upx;
		color: #868686;
		line-height: 2;

		>view {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.imginnerBox {
		display: inline-block;
		width: 600upx;
		height: 350upx;
		overflow: hidden;
		margin-right: 20upx;

	}

	.userClerModel {
		width: 75vw;
		min-height: 45vh;
		padding: 20rpx 0rpx;
	}

	.map {
		width: 100%;
		padding: 28upx 0;
	}

	.overModel {
		min-height: 50vh;
		padding-top: 35upx;
	}

	.main {
		border-radius: 18upx;
		background-color: white;
		padding: 24upx 22upx;
	}

	.showOper {
		.title {
			line-height: 3.2em;
			font-size: 32upx;
			text-align: center;
			font-weight: 600;
		}

		.u-node {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}

		.u-order-title {
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
		}

		.u-order-desc {
			color: rgb(150, 150, 150);
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}

		.u-order-time {
			color: rgb(200, 200, 200);
			font-size: 26rpx;
		}
	}

	.TakeModel {
		width: 80vw;

		.title {
			font-size: 32upx;
			text-align: center;
			line-height: 3.5em;
			font-weight: 500;
		}
	}

	.seleCt {
		width: 50upx;
		height: 50upx;
		border-radius: 50upx;
		border: 1upx solid #303133;
		align-self: center;
		margin-right: 18upx;

	}

	.print-tip {
		padding: 30rpx;
		line-height: 66rpx;

		.item {
			display: flex;
			justify-content: space-between;

			&::v-deep .u-icon {
				margin-right: 4rpx
			}
		}
	}

	.select-waiter {
		:deep(textarea) {
			min-height: 36rpx !important;
		}
	}
</style>